<template>
  <transition name="fade">
    <div v-if="visible" class="image-preview">
      <!-- 遮罩层：点击关闭 -->
      <div class="overlay" @click="closePreview"></div>
      <div class="header">
        <span>{{ current + 1 }} / {{ images.length }}</span>
      </div>
      <!-- 图片容器：支持拖拽 -->
      <div
        class="preview-container"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
        @click.stop
      >
        <div class="item" v-for="(item, index) in images" :key="index">
          <img :src="item" alt="" />
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    images: { type: Array, required: true },
    initialIndex: { type: Number, default: 0 },
  },
  data() {
    return {
      visible: false,
      current: this.initialIndex,
      startX: 0,
      translateX: 0,
      isDragging: false,
      threshold: 30, // 切换图片的拖动阈值
    };
  },
  computed: {
    containerTransform() {
      // 计算当前transform值
      return `translateX(${this.translateX}%)`;
    },
  },
  methods: {
    openPreview() {
      this.visible = true;
      this.reset();
    },

    closePreview() {
      console.log('关闭预览');
      this.visible = false;
      this.reset();
    },

    handleImageClick(event) {
      if (!this.isDragging) {
        this.closePreview();
      }
      event.stopPropagation(); // 阻止点击事件冒泡到遮罩层
    },

    onTouchStart(e) {
      this.isDragging = true;
      this.startX = e.touches[0].clientX;
    },

    onTouchMove(e) {
      if (!this.isDragging) return;

      const touchX = e.touches[0].clientX;
      const diff = touchX - this.startX;
      // 更新translateX，确保它在合理的范围内
      this.translateX =
        -(this.current * 100) + (diff / window.innerWidth) * 100;
    },

    onTouchEnd() {
      if (!this.isDragging) return;
      this.isDragging = false;

      const diff = this.translateX + this.current * 100;
      const absDiff = Math.abs(diff);

      // 根据拖动距离判断是否切换图片
      if (absDiff > this.threshold) {
        if (diff > 0) {
          this.current =
            this.current === 0 ? this.images.length - 1 : this.current - 1;
        } else {
          this.current =
            this.current === this.images.length - 1 ? 0 : this.current + 1;
        }
      }

      // 重置translateX为当前current对应的值
      this.translateX = -(this.current * 100);
    },

    reset() {
      this.translateX = -(this.current * 100); // 初始化时设置为当前current对应的translateX
    },
  },
};
</script>

<style lang="scss" scoped>
/* 添加以下样式用于控制过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
.image-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* 初始透明 */
  z-index: 1;
  pointer-events: auto; /* 自己能接收点击 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */

  /* 当.image-preview显示时自动应用 */
  .image-preview & {
    background-color: rgba(0, 0, 0, 0.9);
  }
}

/* 头部：固定在顶部居中 */
.header {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 16px;
  z-index: 10;
  pointer-events: none; /* 👈 关键：点击穿透，不影响关闭 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-weight: 500;
  user-select: none;
}

/* 图片容器：居中 */
.preview-container {
  position: relative;
  display: flex;
  width: 100%;
  height: 50%;
  z-index: 10;
  transform: v-bind(containerTransform); // 动态绑定translateX
  .item {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    img {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
  }
}
</style>
